<!-- 机构认证 -->
<template>
    <div>
        <FormProcess step="0" :registerStatus="this.userStatus" v-if="this.userStatus.accountBinding != 2"/>
        <FormTitle title="机构认证"/>
        <el-row class="check_error_box" v-if="this.userStatus.agencyCertificationStatus == -1">
            <el-col :span="24" class="check_error_con">&nbsp;<i class="iconfont icon-jingshi"></i>&nbsp;审核未通过原因：{{form.description}}</el-col>
        </el-row>
        <div class="form-box" v-if="this.userStatus.agencyCertificationStatus != 2">
            <el-form :model="form" ref="form" :rules="rules" label-width="130px" class="demo-ruleForm edit-form-box">
                <el-row class="form-conent-box">
                    <el-col :span="24" class="customer-form-title"><div>营业执照正本上传：<i class="customer-title-i">*(营业执照必须上传！)</i></div></el-col>
                    <el-col :span="24">
                        <div class="license-img">
                            <div class="upload-img-box">
                                <div class="img-box">
                                    <ImageZoom
                                            :width='237'
                                            :height='330'
                                            :image="form.credential_photo_address"
                                    ></ImageZoom>
                                </div>
                                <div class="upload-btn" v-if="userStatus.agencyCertificationStatus != 1">
                                    <UploaderImages @input="credentialImg" uploadText="上传营业执照"></UploaderImages>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" class="customer-form-title"><div>法人代表身份证上传：<i class="customer-title-i">*(法人身份证正反面都必须上传！)</i></div></el-col>
                    <el-col :span="24">
                        <div class="id-card-img">
                            <div class="upload-img-box">
                                <div class="img-box">
                                    <ImageZoom
                                            :width='238'
                                            :height='154'
                                            :image="form.artificial_person_front_photo_address"
                                    ></ImageZoom>
                                </div>
                                <div class="upload-btn" v-if="userStatus.agencyCertificationStatus != 1">
                                    <UploaderImages @input="artFrontCart" uploadText="上传正面"></UploaderImages>
                                </div>
                            </div>
                            <div class="upload-img-box">
                                <div class="img-box">
                                    <ImageZoom
                                            :width='238'
                                            :height='154'
                                            :image="form.artificial_person_back_photo_address"
                                    ></ImageZoom>
                                </div>
                                <div class="upload-btn" v-if="userStatus.agencyCertificationStatus != 1">
                                    <UploaderImages @input="artBackCart" uploadText="上传反面"></UploaderImages>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="register-int-box approve-int-box">
                            <el-form-item label="企业名称：" prop="enterprise_name">
                                <el-input class="approve-int" v-model="form.enterprise_name" placeholder="请输入企业名称" :disabled="this.userStatus.agencyCertificationStatus == 1"></el-input>
                            </el-form-item>
                            <el-form-item label="法人姓名：" prop="legal_name">
                                <el-input class="approve-int" v-model="form.legal_name" placeholder="请输入法人姓名" :disabled="this.userStatus.agencyCertificationStatus == 1"></el-input>
                            </el-form-item>
                            <el-form-item label="法人身份证号：" prop="legal_cert_no">
                                <el-input class="approve-int" v-model="form.legal_cert_no" placeholder="请输入法人身份证号" :disabled="this.userStatus.agencyCertificationStatus == 1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="submit-btn approve-submit-btn">
                            <el-button type="info" size="small" @click="exitApprove()">取消</el-button>
                            <el-button type="primary" size="small" @click="saveEnterprise()" v-if="this.userStatus.agencyCertificationStatus != 1">提交</el-button>
                            <el-button type="primary" size="small" v-if="this.userStatus.agencyCertificationStatus == 1" :disabled="true">待审核</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div v-if="this.userStatus.agencyCertificationStatus == 2">
            <div class="form-box">
                <el-row class="approve-success">
                    <el-col :span="24" class="success-title">
                        已认证
                    </el-col>
                    <el-col :span="24" class="success-con">
                        <div>{{this.form.enterprise_name}}</div>
                        <div>营业执照编号</div>
                        <div>{{this.form.legal_cert_no}}</div>
                    </el-col>
                </el-row>
            </div>
            <div class="go_back"><el-button type="text" @click="exitApprove()"><i class="iconfont icon-fanhui"></i> 返回上一页</el-button></div>
        </div>

        <WarmPrompt class="warm-prompy" warContent="机构认证资料提交审核过程中，请保持通讯畅通，汇票线客服人员可能会与您联系。" v-if="this.userStatus.agencyCertificationStatus != 2"/>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import FormProcess from '@component/common/FormProcess.vue';
    import FormTitle from '@component/common/FormTitle.vue';
    import FormImages from '@component/common/FormImages.vue';
    import WarmPrompt from '@component/common/WarmPrompt.vue';
    import UploaderImages from '@component/common/UploaderImages.vue';
    import ImageZoom from '@component/common/ImageZoom.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import { Mutation } from 'vuex-class';
    import _ from 'lodash';
    @Component({
        components: {
            FormProcess,
            FormTitle,
            FormImages,
            WarmPrompt,
            UploaderImages,
            ImageZoom
        },
        computed: {
            ...mapState([
                "userStatus"
            ]),
            ...mapGetters([
                'userInfo'
            ])
        },
        methods: {
            ...mapActions([
                "getPolicy",
                "getStatus",
            ])
        }
    })
    export default class ApproveEnterprise extends Vue {
        @Mutation setUser;
        // disableUpload: boolean = false;
        form = {
            credential_photo_address: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/businesslicense.png',
            credential_photo_id: '',
            enterprise_name: '',
            legal_name: '',
            legal_cert_no: '',
            licence_register_no: '',
            licence_name: '',
            licence_addr: '',
            founded_date: '',
            expired_date: '',
            tax_cert_name: '',
            unified_social_credit_code: '',
            organization_code_number: '',
            artificial_person_front_photo_address: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/id-card-front.png',
            artificial_person_front_photo_id: '',
            artificial_person_back_photo_address: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/id-card-bank.png',
            artificial_person_back_photo_id: ''
        }
        tempForm = {}
        rules = {
            enterprise_name: [
                {required: true, message: '请输入企业名称', trigger: 'blur'}
            ],
            legal_name: [
                {required: true, message: '请输入法人姓名', trigger: 'blur'}
            ],
            legal_cert_no: [
                {required: true, message: '请输入法人身份证号', trigger: 'blur'},
                {
                    pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
                    message: '法人身份证号错误',
                    trigger: 'blur'
                }
            ],
        }
        saveEnterprise () {
            // 发送保存企业信息请求
            this.$refs.form.validate(valid => {
                let enterpriseForm = this.form;
                let self = this;
                if (this.userStatus.agencyCertificationStatus == 0){
                    this.$http.post('customers/enterprise',enterpriseForm)
                        .then((response) => {
                            let promise = self.getStatus();
                            promise.then(resolve => {
                                self.getEnterprise();
                            })
                            if (response.status == 201){
                                this.$confirm('保存成功，请继续完成经办人绑定！','提醒',{
                                    confirmButtonText: '继续',
                                    cancelButtonText: '以后再说',
                                    customClass: 'custom-message-box',
                                    center: true
                                }).then(() => {
                                    this.$router.push('/approveAgent');
                                }).catch(() => {
                                    location.href='/trade.html';
                                })
                            }
                        })
                }else if(this.userStatus.agencyCertificationStatus == -1){
                    // 修改企业
                    this.$http.post(`customers/enterprise/${this.userInfo.enterprise_id}`,enterpriseForm)
                        .then((response) => {
                            let promise = self.getStatus();
                            promise.then(resolve => {
                                self.getEnterprise();
                            })
                            if(response.status < 300){
                                this.$alert('修改成功，请等待客服审核。','提示',{
                                    confirmButtonText: '确定',
                                    customClass: 'custom-message-box',
                                    center: true,
                                    callback: action => {
                                        this.getEnterprise();
                                        if(this.userStatus.businessAuthorizationStatus == 0){
                                            this.$router.push('/approveAgent');
                                        }else if(this.userStatus.accountBinding == 0){
                                            this.$router.push('/approveAccount');
                                        }else {
                                            location.href='/trade.html';
                                        }
                                    }
                                })
                            }
                        })
                }
            })
        }
        // 上传营业执照
        credentialImg (valData: any) {
            this.form.credential_photo_address = valData.path;
            this.form.credential_photo_id = valData.id;
            this.credentialOcr(valData.path);
        }
        // 营业执照ocr
        credentialOcr (imageUrl: string) {
            this.$http.get(`ocr/businessLicense/?imageUrl=${imageUrl}`)
                .then((response) => {
                    if(response.data != null){
                        let organizationCode = (response.data.reg_num).substring(8, 17)
                        this.form.enterprise_name = response.data.name;
                        this.form.legal_name = response.data.person;
                        this.form.licence_register_no = response.data.reg_num;
                        this.form.licence_addr = response.data.address;
                        this.form.founded_date = response.data.establish_date;
                        this.form.expired_date = response.data.valid_period;
                        this.form.tax_cert_name = response.data.name;
                        this.form.unified_social_credit_code = response.data.reg_num;
                        this.form.organization_code_number = organizationCode;
                    }
                })
        }
        // 上传法人身份证正面
        artFrontCart (valData: any) {
            this.form.artificial_person_front_photo_address = valData.path;
            this.form.artificial_person_front_photo_id = valData.id;
            this.artCartOcr(valData.path);
        }
        // 法人身份证正面ocr
        artCartOcr (imageUrl: string) {
            this.$http.get(`ocr/idcard?faceOrBack=face&imageUrl=${imageUrl}`)
                .then((response) => {
                    if(response.data != null){
                        // if(response.data.name != this.form.legal_name){
                        //     this.$alert('您上传的法人身份证姓名与营业执照上的法人姓名不一致，请上传正确的法人身份证。','提示',{
                        //         confirmButtonText: '确定',
                        //         customClass: 'custom-message-box',
                        //         center: true,
                        //         callback: action => {
                        //
                        //         }
                        //     })
                        //     return;
                        // }
                        this.form.legal_cert_no = response.data.id_num;
                    }
                })
        }
        // 法人身份证背面
        artBackCart (valData: any) {
            this.form.artificial_person_back_photo_address = valData.path;
            this.form.artificial_person_back_photo_id = valData.id;
        }
        // 获取企业信息
        async getEnterprise () {
            if(this.userStatus != '' && this.userStatus.agencyCertificationStatus != 0){
                this.$http.get(`customers/customerReview/getSingleEnterprise?customerId=${this.userInfo.customer_id}`)
                    .then((res) => {
                        if (res.status < 300){
                            this.form = res.data;
                            // 同步vuex
                            let enterprise_obj = {
                                enterprise_id: res.data.enterprise_id,
                                enterprise_name: res.data.enterprise_name
                            }
                            let userInfo = _.assign(this.userInfo, enterprise_obj)
                            this.setUser(userInfo);
                        }
                    })
            }

        }

        created () {
            let promise = this.getStatus();
            let self = this;
            promise.then(resolve => {
                this.getEnterprise();
                this.getPolicy();
            })
        }
        // 退出认证
        exitApprove () {
            let backUrl = /back=.+$/.exec(location.hash);
            location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/trade.html";
        }
        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .license-img {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }
    .id-card-img {
        margin-bottom: 30px;
    }
    .go_back {
        display: flex;
        justify-content: center;
        .el-button--text {
            color: $__color-link;
        }
    }
</style>
<style lang="scss">
    .license-img {
        .img-box {
            width: 260px;
            height: 340px;
            /*img {*/
                /*max-width: 237px;*/
                /*max-height: 330px;*/
            /*}*/
        }
    }
    .warm-prompy {
        .prompt-warm-con {
            border-top: 1px solid $__color-line;
            padding-top: 20px;
            padding-bottom: 30px;
        }
    }
    .enterprise-line {
        margin-bottom: 15px;
    }
</style>